<template>
	<view class="content">
		<view class="hader">
			<image :src="proxy.serverimageUrl + 'mypage/v.png'" mode=""></image>
		</view>
		<scroll-view class="ScrollView">
			<view class="card">
				<view class="imagebox">
					<image v-if="Memberobj && Memberobj.avatar" :src="Memberobj.avatar" mode=""></image>
					<image v-else :src="proxy.serverimageUrl + 'mypage/avataricon.png'" mode=""></image>
					<!-- <image v-else src="../../static/member/avatar.png" mode=""></image> -->
				</view>
				<view class="edit">
					<view></view>
					<view v-if="Memberobj.mid" style="display: flex;align-items: center;">
						<button class="btn" @click="edit" v-if="Memberobj.mid && Memberobj.status == 0">继续编辑</button>
						<button class="btn" v-if="Memberobj.mid && Memberobj.status == 1">审核中</button>
						<button class="btn" @click="edit" v-if="Memberobj.mid && Memberobj.status == 2">编辑</button>
						<button class="btn" v-if="Memberobj.mid && Memberobj.status == 3"
							@click="openShow('reSend')">重新申请</button>
						<button style="margin-left: 20rpx;" @click="sharechange" open-type="share"
							:data-shareInfo='shareInfo' class="btn1">分享名片</button>
					</view>
					<view v-else class="">
						<button class="btn2" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">申请加入</button>
						<!-- <button class="btn2" @click="edit">申请加入</button> -->
					</view>
				</view>
				<view class="nameBox" v-if="Memberobj.mid">
					<view class="nametext">
						{{Memberobj.memberName}}
					</view>
					<image v-if="Memberobj.employmentSituation == '会长'" :src="proxy.serverimageUrl + 'member/1.png'"
						mode=""></image>
					<image v-if="Memberobj.employmentSituation == '副会长'" :src="proxy.serverimageUrl +'member/2.png'"
						mode=""></image>
					<image v-if="Memberobj.employmentSituation == '理事'" :src="proxy.serverimageUrl +'member/3.png'"
						mode=""></image>
					<image v-if="Memberobj.employmentSituation == '会员'" :src="proxy.serverimageUrl + 'member/4.png'"
						mode=""></image>
					<image v-if="Memberobj.employmentSituation == '监事长'" :src="proxy.serverimageUrl+'member/5.png'" mode="">
					</image>
					<image v-if="Memberobj.employmentSituation == '秘书长'" :src="proxy.serverimageUrl+'member/6.png'" mode="">
					</image>
					<image v-if="Memberobj.employmentSituation == '监事'" :src="proxy.serverimageUrl+'member/7.png'" mode="">
					</image>
				</view>
				<view class="loginbox" v-else>
					<p class="logintext">登录/注册</p>
					<p class="logintext2">快来申请加入我们吧</p>
				</view>
				<view class="labelbox" v-if="Memberobj.mid">
					<view class="labelbox-item" v-for="(item,index) in Memberobj.mainDutieslist" :key="index">
						{{item.organization}}{{item.duties}}
					</view>
				</view>
				<p class="p1" v-if="Memberobj.mid">{{Memberobj.duties}}</p>
				<p class="p1" v-if="Memberobj.mid">{{Memberobj.workUnit}}</p>
				<view class="memberBox">
					<view class="memberBox-item" @click="gomembershar(1,Memberobj.mid)">
						<p class="p-num" v-if="Memberobj.mid">{{Memberobj.browseNumber}}</p>
						<p class="p-num" v-else>0</p>
						<p class="p-text">会员访问</p>
					</view>
					<view class="memberBox-item" @click="gomembershar(3,Memberobj.mid)">
						<p class="p-num" v-if="Memberobj.mid">{{Memberobj.sharingFrequency}}</p>
						<p class="p-num" v-else>0</p>
						<p class="p-text">会员分享</p>
					</view>
					<view class="memberBox-item" @click="gomembershar(2,Memberobj.mid)">
						<p class="p-num" v-if="Memberobj.mid">{{Memberobj.collectionNumber}}</p>
						<p class="p-num" v-else>0</p>
						<p class="p-text">会员收藏</p>
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="tabs-item" @click="gomembershar(2,Memberobj.mid,1)">
					<image :src="proxy.serverimageUrl + 'mypage/icon1.png'" mode=""></image>
					<view class="text">
						名片收藏
					</view>
				</view>
				<view class="tabs-item" @click="gomenberactivi">
					<image :src="proxy.serverimageUrl + 'mypage/icon2.png'" mode=""></image>
					<view class="text">
						我的活动
					</view>
				</view>
			</view>
			<view class="tabs2">
				<view class="tabs2-item" @click="gofeed">
					<view class="item-left">
						<image :src="proxy.serverimageUrl +'mypage/tab3.png'" mode=""></image>
						<view class="text">
							意见反馈
						</view>
					</view>
					<view class="item-right">
						<image :src="proxy.serverimageUrl + 'right-arror.png'" mode=""></image>
					</view>
				</view>
				<view class="tabs2-item" @click="openShow('tel')">
					<view class="item-left">
						<image :src="proxy.serverimageUrl +'mypage/tab1.png'" mode=""></image>
						<view class="text">
							联系我们
						</view>
					</view>
					<view class="item-right">
						<image :src="proxy.serverimageUrl +'right-arror.png'" mode=""></image>
					</view>
				</view>
				<view class="tabs2-item" @click="openShow('exit')">
					<view class="item-left">
						<image :src="proxy.serverimageUrl +'mypage/tab2.png'" mode=""></image>
						<view class="text">
							退出登录
						</view>
					</view>
					<view class="item-right">
						<image :src="proxy.serverimageUrl + 'right-arror.png'" mode=""></image>
					</view>
				</view>
			</view>
			<up-modal :show="modalshow" showCancelButton @cancel="modalcancel" :title="modaltitle"
				@confirm="isConfirm(modaltitle)" :content='modalcontent'></up-modal>
		</scroll-view>
		<view class="logobox">
			<image :src="proxy.serverimageUrl + 'mypage/logo.png'" mode=""></image>
			<p class="logobox-text">产品由智眸星科技提供技术支持</p>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		getMemberInfo,
		getPhone,
		getshare
	} from '../../utils/api.js'
	import BASE_URL from '@/utils/env.js'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const shareInfo = ref({
		title: '会员分享',
		path: '/pages/Mypage/index', // 分享路径
		imageUrl: '', // 分享图片
		desc: '',
		content: ''
	})

	const mid = ref('')
	mid.value = uni.getStorageSync('mid')
	onLoad(() => {})
	onShow(() => {
		if (mid.value) {
			getMember(mid.value)
		}
	})
	onShareAppMessage((res) => {
		console.log('分享', res)
		let shareInfo = res.target ? res.target.dataset.shareinfo : shareInfo
		return {
			...shareInfo,
			success(res) {
				shareSuccess()
			},
			fail(res) {
				shareFail()
			}
		}
	})
	/*分享时调用接口*/
	const sharechange = () => {
		let params = {
			mid: mid.value,
			smid: mid.value
		}
		getshare(params).then(res => {
			console.log(res);
		})
	}
	/*跳转到会员分享界面*/
	const gomembershar = (type, mid, index) => {
		if (mid) {
			uni.navigateTo({
				url: '/subpages/Membersharing/index?type=' + type + '&mid=' + mid + '&coltype=' + index
			})
		} else {
			uni.showToast({
				title: '没有会员信息',
				icon: 'error'
			})
		}

	}
	const gofeed = () => {
		//判断是否有登录信息
		if (Memberobj.value == '') {
			uni.showToast({
				title: '没有会员信息',
				duration: 1000,
				icon: 'error'
			})
			return
		} else {
			uni.navigateTo({
				url: '/subpages/feedback/index'
			})
		}
	}
	const gomenberactivi = () => {
		uni.navigateTo({
			url: '/subpages/menberactivity/index'
		})
	}

	const Memberobj = ref({})
	/*查询会员详细信息*/
	const getMember = (mid, type) => {
		getMemberInfo(mid).then(res => {
			if (res.code == 200 && type !== 1) {
				Memberobj.value = res.data
				if (Memberobj.value.mainDutiesDtos && Memberobj.value.mainDutiesDtos.length > 2) {
					Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos.slice(0, 2)
				} else {
					Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos
				}
				shareInfo.value.content = res.data.memberName
				shareInfo.value.desc = res.data.memberName

			} else {
				if (res.code == 200 && res.data.status === 0) {
					uni.redirectTo({
						url: '/subpages/applyfor/Otherinformation'
					})
				} else {
					Memberobj.value = res.data
					if (Memberobj.value.mainDutiesDtos && Memberobj.value.mainDutiesDtos.length > 2) {
						Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos.slice(0, 2)
					} else {
						Memberobj.value.mainDutieslist = Memberobj.value.mainDutiesDtos
					}
					uni.showToast({
						title: '获取到会员信息',
						icon: 'success',
					})
				}
			}

		})
	}


	const modalshow = ref(false)
	const modaltitle = ref('')
	const modalcontent = ref('')
	const modalcancel = () => {
		modalshow.value = false
	}
	const modalconfirm = () => {
		uni.makePhoneCall({
			phoneNumber: '13500303319' // 电话号码
		});
		modalshow.value = false
	}
	const modalconfirm2 = () => {
		uni.clearStorageSync();
		uni.switchTab({
			url: '/pages/Home/index'
		})
		modalshow.value = false
		Memberobj.value = {}
		mid.value = ''
	}
	const openShow = (item) => {
		if (item == 'tel') {
			modalshow.value = true
			modaltitle.value = '联系我们'
			modalcontent.value = '是否通过该方式联系工作人员?'
			return
		} else if (item == 'exit') {
			modalshow.value = true
			modaltitle.value = '退出登录'
			modalcontent.value = '是否确定退出登录?'
			return
		} else if (item == 'reSend') {
			modalshow.value = true
			modaltitle.value = '重新申请'
			modalcontent.value = '退回原因为:' + Memberobj.value.refuseRemark + '\n是否需要进行重新申请?'
			return
		}
	}
	const isConfirm = (item) => {
		if (item == '联系我们') {
			modalconfirm()
			modalshow.value = false
		} else if (item == '退出登录') {
			modalconfirm2()
			modalshow.value = false
		} else if (item == '重新申请') {
			edit()
			modalshow.value = false
		}
	}
	const codebum = ref('')
	const logincode = () => {
		uni.login({
			"provider": "weixin",
			success: function(loginRes) {
				// 登录成功
				let code = loginRes.code
				codebum.value = loginRes.code
				uni.getUserInfo({
					provider: 'weixin',
					success: function(info) {
						uni.request({
							url: BASE_URL + '/association/getWxOpenID',
							data: {
								code: code,
							},
							method: 'POST',
							success: (res) => {
								if (res.data.code === 200) {
									uni.setStorageSync('openid', res.data
										.data)
								}
							}
						});
					}
				})
			},
			fail: function(err) {
				// 登录授权失败  
				// err.code是错误码
			}

		})
	}
	const edit = () => {
		uni.redirectTo({
			url: '/subpages/applyfor/Otherinformation'
		})
	}
	const onGetPhoneNumber = (e) => {
		if (uni.getStorageSync(mid)) {
			uni.redirectTo({
				url: '/subpages/applyfor/Otherinformation'
			})
		} else {
			uni.login({
				"provider": "weixin",
				success: function(loginRes) {
					// 登录成功
					if (e.detail.errMsg == 'getPhoneNumber:ok') {
						let data = {
							code: loginRes.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}
						getPhone(data).then(res => {
							console.log(res)
							if (res.code == 200) {
								uni.setStorageSync('openid', res.data
									.openid)
								uni.setStorageSync('mid', res.data
									.mid)
								uni.setStorageSync('memberNo', res.data
									.memberNo)
								getMember(res.data.mid, 1)

							}
						})
					}
				},
				fail: function(err) {
					// 登录授权失败  
					// err.code是错误码
				}

			})
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		width: 100vw;
		padding: 168rpx 40rpx;
		background-color: #F1F4F8;

		.hader {
			width: 100%;
			height: 458rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 20;
			background: linear-gradient(0deg, #F1F4F8, #3369E1);
			text-align: center;

			image {
				width: 333rpx;
				height: 243rpx;
				// position: absolute;
				// top: 0;
				// left: 50%;
				// transform: translateX(-50%);
			}
		}

		.ScrollView {
			position: relative;
			z-index: 30;
			height: calc(100vh - 358rpx);

			.card {
				width: 100%;
				padding: 45rpx 42rpx 50rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				position: relative;
				margin-top: 76rpx;
				border-bottom: 4rpx solid #89A8EC;

				.imagebox {
					position: absolute;
					top: -66rpx;
					left: 55rpx;
					width: 180rpx;
					z-index: 33;
					height: 180rpx;
					border-radius: 50%;
					border: 6rpx solid #D3E0FF;
					background-color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 148rpx;
						height: 159rpx;
						border-radius: 50%;
					}
				}

				.edit {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 150rpx;
						height: 64rpx;
						background: #2854B7;
						border-radius: 32rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FDFEFF;
						border: none;
						padding: 0 8rpx;
					}

					.btn1 {
						width: 150rpx;
						height: 64rpx;
						background: #E8EFFE;
						border-radius: 32rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #2854B7;
						border: none;
						padding: 0 8rpx;
					}

					.btn2 {
						width: 200rpx;
						height: 64rpx;
						background: #2854B7;
						border-radius: 32rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FDFEFF;
						border: none;
						padding: 0 8rpx;
					}

					button::after {
						border: none;
					}
				}

				.nameBox {
					display: flex;
					align-items: center;

					.nametext {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 40rpx;
						color: #252525;
					}

					image {
						margin-left: 13rpx;
						width: 104rpx;
						height: 43rpx;
					}
				}

				.loginbox {
					margin-top: 30rpx;

					.logintext {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 40rpx;
						color: #252525;
					}

					.logintext2 {
						margin-top: 19rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #BBC0CA;
					}
				}

				.labelbox {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.labelbox-item {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 22rpx;
						color: #2A55B7;
						background: #E6EEFF;
						padding: 7rpx 11rpx;
						margin-right: 11rpx;
					}
				}

				.p1 {
					margin-top: 18rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 15rpx;
					color: #BBC0CA;
				}

				.memberBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 50rpx;

					.memberBox-item {
						text-align: center;

						.p-num {
							font-family: DIN;
							font-weight: bold;
							font-size: 36rpx;
							color: #363636;
						}

						.p-text {
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #979BA2;
						}
					}
				}
			}

			.tabs {
				margin-top: 29rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tabs-item {
					background-color: #fff;
					display: flex;
					align-items: center;
					padding: 32rpx 45rpx;
					border-radius: 20rpx;

					image {
						width: 72rpx;
						height: 72rpx;
					}

					.text {
						margin-left: 23rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #2D2D2D;
					}
				}
			}

			.tabs2 {
				margin-top: 34rpx;
				padding: 30rpx 34rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.tabs2-item {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					height: 90rpx;

					.item-left {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						.text {
							margin-left: 29rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 30rpx;
							color: #2D2D2D;
						}
					}

					.item-right {

						// width: 12rpx;
						// height: 20rpx;
						image {
							width: 12rpx;
							height: 20rpx;
						}
					}
				}
			}
		}

		.logobox {
			margin-top: 45rpx;
			text-align: center;

			image {
				width: 156rpx;
				height: 48rpx;
			}

			.logobox-text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				margin-top: 17rpx;
				color: #CED1D4;
			}
		}
	}
</style>